<template>
  <PublicLoading v-if="loading.mounted" />
  <div v-else class="dt-main-tabs-content">
    <!-- <div class="dt-content-left">
      <PmChatList />
    </div> --><!--可选-->
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <div class="dt-head-title">
            <!-- <div class="dt-head-breadcrumb" @click.stop="goBack">
              <i class="el-icon-arrow-left"></i>
              <span>返回</span>
              <em>|</em>
            </div> -->
            <span>设置项目节点</span>
          </div>
        </div>
      </div>
      <div class="dt-content-page">
        <div class="dt-node-box">
          <div class="dt-toolbar">
            <el-form label-width="106px" label-position="left">
              <el-form-item label="节点模板">
                <el-select v-if="!nodeList.length" v-model="templateId" placeholder="请选择节点模板" style="width: 400px"
                  @change="selectTemplate">
                  <el-option v-for="item in templateList" :key="item.id" :label="item.templateName"
                    :value="item.id"></el-option>
                </el-select>
                <el-select v-else v-model="templateId" placeholder="请选择节点模板" style="width: 400px"
                  @change="switchTemplate" @visible-change="beforeChange">
                  <el-option v-for="item in templateList" :key="item.id" :label="item.templateName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="dt-template-button">
              <!-- <el-button icon="el-icon-goods">模板市场</el-button> -->
              <el-button class="dt-my-template" icon="el-icon-takeaway-box" @click="jumpLink">管理我的模板</el-button>
            </div>
          </div>
          <div class="dt-node-list">
            <div v-if="!nodeList.length" class="dt-node-add" @click="openSetNode(0)">
              <el-button type="text" icon="el-icon-circle-plus-outline">添加项目节点</el-button>
            </div>
            <template v-else>
              <div class="dt-node-item por" v-for="(item, index) in nodeList" :key="item.id">
                <el-popover popper-class="dt-card-popover" placement="bottom" trigger="click"
                  v-model="item.isShowPopover">
                  <ul class="dt-add-node">
                    <li @click="openSetNode(1, index)">添加左侧节点</li>
                    <li @click="openSetNode(2, index)">添加右侧节点</li>
                  </ul>
                  <i slot="reference" class="dt-circle-plus poa"></i>
                </el-popover>
                <div class="dt-node-card por" :class="item.id == nodeId ? 'dt-cur' : ''"
                  @click.stop="nodeTask(item.id, item.addTaskPower)">
                  <div class="dt-nodeclose poa">
                    <i class="el-icon-close" @click.stop="openDetele(item, index)"></i>
                  </div>

                  <h4>{{ item.nodeName }}</h4>
                  <p v-if="item.master.length">
                    <span v-for="master in item.master" :key="master.userId" class="dt-user-name">{{ master.userName
                    }}</span>
                  </p>
                  <p class="dt-null" v-else>暂未设置负责人</p>
                  <div class="dt-node-progress">
                    <span>权重：{{ item.weight }}%</span><span>进度：{{ item.progress ? item.progress.toFixed(2) : 0
                    }}%</span>
                  </div>
                  <div v-if="index != 0" class="dt-dashed-line left poa"></div>
                  <div v-if="index != nodeList.length - 1" class="dt-dashed-line right poa"></div>
                </div>
                <div class="dt-node-time dt-no-data" v-if="!item.startTime || !item.endTime">
                  <!-- <p>共 {{item.planDays}} 天</p> -->
                  <el-button type="text" @click.stop="openEdit(item)">设置计划工期</el-button>
                </div>
                <div class="dt-node-time" v-else>
                  <p>{{ item.startTime ? item.startTime.split(' ')[0] : '' }} 至 {{ item.endTime ?
                    item.endTime.split(' ')[0] : '' }}</p>
                  <el-button type="text" @click.stop="openEdit(item)">编辑</el-button>
                </div>
              </div>
            </template>
          </div>
        </div>
        <template v-if="nodeList.length">
          <!-- <div class="dt-title-box" :class="{'addTask':!taskDetailList.nodeStartTime}"> -->
          <div class="dt-title-box">
            <div class="dt-statistics">
              <h3>任务详情</h3>
              <div class="dt-statistics-task">
                <span>任务总数：{{ taskDetailList.totalCount }}</span>
                <span>进行中：{{ taskDetailList.doingCount }}</span>
                <span>已完成：{{ taskDetailList.complateCount }}</span>
                <span>待认领：{{ taskDetailList.waitCount }}</span>
                <span>已延期：{{ taskDetailList.delayCount }}</span>
              </div>
              <div class="dt-statistics-output">
                <span>总产值：{{
                  taskDetailList.totalOutput
                    ? this.$tools.moneyLower(taskDetailList.totalOutput)
                    : taskDetailList.totalOutput == null
                      ? '***'
                      : taskDetailList.totalOutput
                }}元</span>
                <span>已完成产值：{{
                  taskDetailList.complateOutput
                    ? this.$tools.moneyLower(taskDetailList.complateOutput)
                    : taskDetailList.complateOutput == null
                      ? '***'
                      : taskDetailList.complateOutput
                }}元</span>
              </div>
            </div>
            <el-dropdown
              v-if="(nodeList.creatorOrMaster || isAddTaskPower) && nodeList.length && taskDetailList.nodeStartTime"
              @command="publishOrder" trigger="click" class="dt-addTask-btn">
              <el-button type="primary" size="mini"> 添加任务<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="task">内部任务</el-dropdown-item>
                <el-dropdown-item command="addOut">企业订单</el-dropdown-item>
                <el-dropdown-item command="addCk">创客订单</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button v-else-if="!taskDetailList.nodeStartTime" type="primary" size="mini" @click="addTaskPrompt"
              class="dt-addTask-btn">
              添加任务<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-button v-else-if="!nodeList.creatorOrMaster || !isAddTaskPower" type="primary" size="mini"
              @click="noPermission" class="dt-addTask-btn">
              添加任务<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <div class="custom-table" :class="{ empty: taskDetailList.list.length == 0 }">
            <PublicEmpty v-if="taskDetailList.list.length == 0" :ishowImage="true" />
            <el-table v-else :data="taskDetailList.list" style="width: 100%" :border="true"
              :row-class-name="tableRowClassName" @row-click="editTaskCard">
              <el-table-column prop="taskNo" label="编号" width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.taskNo || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="majorName" label="所属专业" min-width="130">
                <template slot-scope="scope">
                  <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.majorName"
                    placement="top-start">
                    <span class="dt-content-project-list-project">{{ scope.row.majorName || '--' }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="taskName" label="任务名称" min-width="220">
                <template slot-scope="scope">
                  <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.taskName"
                    placement="top-start">
                    <span class="dt-content-project-list-project">{{ scope.row.taskName || '--' }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="taskStateName" label="任务状态" min-width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.taskStateName || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="taskTypeName" label="任务类型" min-width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.taskTypeName || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createName" label="创建人" min-width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.createName || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="masterName" label="负责人" min-width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.masterName || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="output" label="产值" min-width="130">
                <template slot-scope="scope">
                  <span v-if="scope.row.output === null">***</span>
                  <span v-else>{{ scope.row.output }}元</span>
                </template>
              </el-table-column>
              <el-table-column prop="progress" label="进度" min-width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.progress >= 0">{{ scope.row.progress }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="计划工期" min-width="180">
                <template slot-scope="scope">
                  <span v-if="scope.row.taskType != 1 && scope.row.demandState == 20">--</span>
                  <span v-else>{{ scope.row.startTime.split(' ')[0] }} 至 {{ scope.row.endTime.split(' ')[0] }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="planDays" label="计划天数（天）" min-width="110">
                <template slot-scope="scope">
                  <span v-if="scope.row.planDays > 0">{{ scope.row.planDays }}</span>
                  <span v-else-if="scope.row.demandState == 20">--</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="completeTime" label="完成时间" min-width="130">
                <template slot-scope="scope">
                  <span> {{ scope.row.completeTime ? scope.row.completeTime.split(' ')[0] : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="consumeDays" label="工期消耗（天）" min-width="130">
                <template slot-scope="scope">
                  <span v-if="scope.row.demandState == 20">--</span>
                  <span v-else>{{ scope.row.consumeDays }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="completeState" label="完成情况" min-width="180">
                <!-- <template slot-scope="scope">
                  <span v-if="scope.row.completeState > 0">提前 {{ Math.abs(scope.row.completeState) }} 天完成</span>
                  <span v-else-if="scope.row.completeState < 0">延期 {{ Math.abs(scope.row.completeState) }} 天</span>
                  <span v-else></span>
                </template> -->
                <template slot-scope="scope">
                  {{ scope.row | filterComState }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </div>
      <div class="dt-content-bottom">
        <el-button type="primary" size="medium" @click="addProjectBox">完成项目创建</el-button>
        <el-button size="medium" @click="goBack">返回上一步</el-button>
        <!-- <button size="medium" @click="closeTab('pm-create')">关闭标签测试</button> -->
      </div>
    </div>
    <!-- 创建节点-->
    <el-dialog class="dt-set-node" :title="setNodeTitle" :visible.sync="setNodeIsShow" :append-to-body="true"
      width="680px" :close-on-press-escape="false" :close-on-click-modal="false" @close="closeCallback">
      <el-form :model="setNodeRuleForm" :rules="setNodeRules" ref="setNodeRuleForm" label-width="100px"
        label-position="left" class="dt-create-pm-box">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input type="text" placeholder="请输入节点名称，最多8个字" v-model.trim="setNodeRuleForm.nodeName" maxlength="8"
            show-word-limit style="width: 540px">
          </el-input>
        </el-form-item>
        <el-form-item label="计划工期" prop="planDays">
          <el-input placeholder="输入天数" v-model.trim="setNodeRuleForm.planDays" style="width: 160px"
            @input="planDaysInput" @blur="planDaysBlur">
            <template slot="append">天</template>
          </el-input>
          <el-date-picker v-model="setNodeRuleForm.dateArr" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 370px; margin-left: 5px" @change="dateArrBlur"
            :clearable="false" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="权重占比" prop="weight">
          <el-input placeholder="权重占比" v-model.trim="setNodeRuleForm.weight" :maxlength="3" style="width: 160px"
            @input="weightInput">
            <template slot="append"> % </template>
          </el-input>
          <span v-if="residueWeight >= 0" class="dt-residue-weight">剩余可分配权重 {{ residueWeight }}%</span>
        </el-form-item>
        <el-form-item label="负责人">
          <!--项目人员-->
          <PublicSelectProjectUser :option="optNode" @select="selectUser" ref="nodeSelectUser" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitFormSetNode('setNodeRuleForm')"
          :loading="loading.setNodeloading">确定</el-button>
        <el-button size="medium" @click="resetFormSetNode('setNodeRuleForm')">取消</el-button>
      </div>
    </el-dialog>
    <!-- 创建节点end -->
    <!-- 创建模板 -->
    <el-dialog :visible.sync="templateVisible" top="18vh" :append-to-body="true" :close-on-press-escape="false"
      :close-on-click-modal="false" class="dt-template-box" title="保存项目节点为模板" width="420px" :show-close="false">
      <el-form :model="templateRuleForm" :rules="templateRules" ref="templateRuleForm">
        <el-form-item prop="templateName">
          <label for="prompt-input">模板名称</label>
          <el-input v-model="templateRuleForm.templateName" :maxlength="20" autocomplete="off" placeholder="请输入模板名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="resetFormTemplate('templateRuleForm')">跳过</el-button>
        <el-button size="medium" type="primary" @click="submitFormTemplate('templateRuleForm')">确定</el-button>
      </div>
    </el-dialog>
    <!-- 创建模板end -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      secret_uid: this.$store.state.uid,
      loading: { mounted: false, setNodeloading: false },
      templateList: [],
      templateId: '',
      oldTemplateId: '',
      pmStartTime: '',
      pmEndTime: '',
      pmPlanDays: '',
      nodeList: [],
      nodeId: 0,
      taskDetailList: { list: [] },
      setNodeIsShow: false,
      setNodeTitle: '设置节点',
      totalWeight: 0,
      initWeight: 0,
      residueWeight: 0,
      setNodeRuleForm: {
        nodeName: '',
        planDays: '',
        dateArr: [],
        weight: '',
        masterUid: '',
        parentId: 0,
        sonId: 0
      },
      setNodeRules: {
        nodeName: [{ required: true, message: '请输入节点名称，最多8个字', trigger: 'blur' }],
        planDays: [
          { required: true, message: '请输入天数', trigger: 'blur' },
          { validator: this.validatePlanDays, trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入权重占比', trigger: 'blur' },
          { validator: this.validateWeight, trigger: 'blur' }
        ]
      },
      //节点负责人的选人配置
      optNode: {
        width: '540px',
        placeholder: '请选择负责人，最多设置3人',
        isMultiple: true, //是否多选
        maxSelect: 3, //单选忽略
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      //日期配置
      pickerOptions: {
        disabledDate: (date) => {
          // return date < new Date(this.pmStartTime).getTime() - 3600 * 1000 * 24 || date > new Date(this.pmEndTime).getTime()
          return date < new Date(this.pmStartTime).getTime() || date > new Date(this.pmEndTime).getTime()
        }
      },
      page: 1,
      pageSize: 200,
      total: 0,
      templateVisible: false,
      templateRuleForm: {
        templateName: ''
      },
      templateRules: {
        templateName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
          { min: 1, max: 20, message: '请输入1-20字模板名称', trigger: 'blur' }
        ]
      },
      isAddTaskPower: 0 //添加任务权限
    }
  },
  computed: {
    tabs() {
      return this.$tools.getTabs(this, this.secret_uid)
    },
    hashName() {
      return this.$tools.getHashName(this)
    },
    query() {
      return this.$tools.getQuery(this)
    }
  },
  filters: {
    filterComState(row) {
      if (row.taskState !== 7) {
        return '--'
      } else {
        if (row.completeState > 0) {
          return '提前' + row.completeState + '天完成'
        } else if (row.completeState < 0) {
          return '延期' + Math.abs(row.completeState) + '天完成'
        } else {
          return '按时完成'
        }
      }
    }
  },
  methods: {
    //关闭标签
    closeTab(hashName) {
      // var isExistItem = this.tabs.filter((item) => {
      //     return item.hashName === hashName
      //   })[0],
      //   index = this.tabs.indexOf(isExistItem)

      // if (hashName === this.hashName) {
      //   if (this.tabs[index + 1]) {
      //     this.$router.push(this.tabs[index + 1].fullPath)
      //   } else if (this.tabs[index - 1]) {
      //     this.$router.push(this.tabs[index - 1].fullPath)
      //   }
      // }
      //强制调用
      this.$tools.setTabs(this, this.secret_uid, 'close', { hashName: hashName })
    },
    jumpLink() {
      this.$router.push('/main/#/pm?tab=mana-template&rootProjectId=' + this.query.rootProjectId)
    },
    goBack() {
      this.$router.push('/main/#/pm?tab=create&elTab=1&rootProjectId=' + this.query.rootProjectId)
    },
    addTaskPrompt() {
      this.$alert('该节点尚未设置计划工期，无法添加任务', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: (action) => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${action}`
          // })
        }
      })
    },
    noPermission() {
      this.$alert('暂无权限，无法添加任务', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: (action) => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${action}`
          // })
        }
      })
    },
    validateWeight(rule, value, callback) {
      if (value <= 0) {
        callback(new Error('请输入大于0数字'))
      } else if (value > parseFloat(this.residueWeight)) {
        callback(new Error('不能超出剩余可分配权重'))
      } else {
        callback()
      }
    },
    weightInput(value) {
      // 只允许输入数字
      this.setNodeRuleForm.weight = value.replace(/[^\d]/g, '')
    },
    tableRowClassName({ row, rowIndex }) {
      // if (row.completeState < 0) {
      //   return 'postpone-row'
      // }
      // if (row.completeState > 0) {
      //   return 'advance-row '
      // }
    },
    beforeChange(value) {
      if (value) {
        this.oldTemplateId = this.templateId
      }
      // console.log(this.oldTemplateId, this.templateId, '-----')
    },
    switchTemplate(value) {
      this.$confirm('切换模板将会导致任务丢失，确定要更换模板吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning'
      })
        .then(() => {
          this.bindTemplate(value)
        })
        .catch(() => {
          // console.log(this.oldTemplateId, this.templateId)
          this.templateId = parseInt(this.oldTemplateId) || ''
        })
    },
    selectTemplate(value) {
      this.bindTemplate(value)
    },
    bindTemplate(id) {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId,
          templateId: id
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/bindTemplateNode2ProjectNode'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.templateId = id
              if (data.data.firstNode) {
                this.nodeList = this.getTreeData(data.data.firstNode)
                // this.nodeList = this.getTreeData(data.data.firstNode).map((item) => {
                //   if (!item.endTime) {
                //     const today = new Date()
                //     const date = new Date()
                //     let planDays = this.setNodeRuleForm.planDays
                //     date.setTime(date.getTime() + 3600 * 1000 * 24 * (planDays - 1))
                //     return {
                //       ...item,
                //       startTime: this.$tools.getDateFormatString('ymdhms', today),
                //       endTime: this.$tools.getDateFormatString('ymdhms', date)
                //     }
                //   } else {
                //     return {
                //       ...item
                //     }
                //   }
                // })

                // 重新算权重
                this.totalWeight = 0
                this.nodeList.forEach((item) => {
                  item.isShowPopover = false
                  this.totalWeight = this.$tools.accAdd(this.totalWeight, item.weight)
                })
                this.initWeight = this.residueWeight = this.$tools.Subtr(100, this.totalWeight)
                // 重新算权重

                this.getTaskList(this.getTreeData(data.data.firstNode)[0].id)
                // this.taskDetailList = { list: [] }

                // console.log(this.nodeList, 789)
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    },
    publishOrder(command) {
      var queryData = {
        projectName: this.taskDetailList.rootProjectName,
        rootProjectId: this.query.rootProjectId,
        nodeId: this.taskDetailList.nodeId
      }
      switch (command) {
        case 'task':
          this.$root.$emit('openTaskCard', {
            mode: 'create',
            rootProjectId: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].rootProjectId,
            rootProjectName: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].rootProjectName,
            nodeId: this.nodeId,
            startTime: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].startTime,
            endTime: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].endTime
          })
          break
        case 'addOut':
          this.getIsEmployer(1, queryData)
          break
        case 'addCk':
          this.getIsEmployer(2, queryData)
          break
      }
    },
    nodeTask(id, addTaskPower) {
      // this.$router.push('/main/#/pm?tab=create&elTab=2&rootProjectId=' + this.query.rootProjectId + '&nodeId=' + id)
      this.isAddTaskPower = addTaskPower
      this.getTaskList(id)
    },
    planDaysInput(value) {
      // 只允许输入数字
      this.setNodeRuleForm.planDays = value.replace(/[^\d]/g, '')
    },
    validatePlanDays(rule, value, callback) {
      if (value <= 0) {
        callback(new Error('请输入大于0工期天数'))
      } else if (value > this.pmPlanDays) {
        callback(new Error('节点计划工期不在项目计划工期范围内'))
      } else {
        callback()
      }
    },
    planDaysBlur() {
      if (this.setNodeRuleForm.planDays > 0) {
        const today = new Date(this.pmStartTime)
        const date = new Date()
        let planDays = this.setNodeRuleForm.planDays
        date.setTime(today.getTime() + 3600 * 1000 * 24 * (planDays - 1))
        this.setNodeRuleForm.dateArr = [today, date]
      }
    },
    dateArrBlur() {
      if (this.setNodeRuleForm.dateArr && this.setNodeRuleForm.dateArr[0]) {
        let startTime = this.setNodeRuleForm.dateArr[0].getTime()
        let endTime = this.setNodeRuleForm.dateArr[1].getTime()
        let planDays = (endTime - startTime) / (3600 * 1000 * 24)
        this.setNodeRuleForm.planDays = planDays + 1
      }
    },
    selectUser(ids) {
      // console.log(ids)
      this.setNodeRuleForm.masterUid = ids
    },
    openSetNode(type, index) {
      this.residueWeight = this.initWeight
      this.setNodeIsShow = true

      //新增节点前重置项目列表选人组件 清除表单验证
      this.optNode.selectedUserList = []
      setTimeout(() => {
        // this.$refs.nodeSelectUser.resetSelectUser()
        this.$nextTick(() => {
          this.$refs.setNodeRuleForm.clearValidate()
        })
      }, 500)

      if (type) {
        this.nodeList[index].isShowPopover = false
        if (type == 1) {
          // 向左添加节点
          this.setNodeTitle = '添加左侧节点'
          if (index == 0) {
            this.setNodeRuleForm.sonId = this.nodeList[index].id
          } else {
            this.setNodeRuleForm.parentId = this.nodeList[index - 1].id
            this.setNodeRuleForm.sonId = this.nodeList[index].id
          }
        } else if (type == 2) {
          // 向右添加节点
          this.setNodeTitle = '添加右侧节点'
          if (index == this.nodeList.length - 1) {
            this.setNodeRuleForm.parentId = this.nodeList[index].id
          } else {
            this.setNodeRuleForm.parentId = this.nodeList[index].id
            this.setNodeRuleForm.sonId = this.nodeList[index + 1].id
          }
        }
      }
    },
    submitFormSetNode(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.setNodeloading = true
          if (this.setNodeRuleForm.projectNodeId) {
            this.editNode()
          } else {
            this.createNode()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormSetNode(formName) {
      this.$refs[formName].resetFields()
      this.setNodeIsShow = false
    },
    closeCallback() {
      this.setNodeRuleForm = {
        nodeName: '',
        planDays: '',
        dateArr: [],
        weight: '',
        masterUid: '',
        parentId: 0,
        sonId: 0
      }
      this.setNodeTitle = '设置节点'
    },
    createNode() {
      var data = [
        {
          userId: this.uid,
          nodeName: this.setNodeRuleForm.nodeName,
          rootProjectId: this.query.rootProjectId,
          parentId: this.setNodeRuleForm.parentId,
          sonId: this.setNodeRuleForm.sonId,
          planDays: this.setNodeRuleForm.planDays,
          startTime: this.$tools.getDateFormatString('ymdhms', this.setNodeRuleForm.dateArr[0]).substring(0, 10) + ' 00:00:00',
          endTime: this.$tools.getDateFormatString('ymdhms', this.setNodeRuleForm.dateArr[1]).substring(0, 10) + ' 23:59:59',
          masterUid: this.setNodeRuleForm.masterUid,
          weight: this.setNodeRuleForm.weight
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/createProjectNode'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                onClose: () => {
                  this.getNodeList()
                  this.setNodeIsShow = false
                  this.loading.setNodeloading = false
                  this.closeCallback()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {
                  this.loading.setNodeloading = false
                }
              })
            }
          })
        })
        .catch((error) => { })
    },
    openDetele(item, index) {
      if (this.nodeList[index].isLock) {
        return
      }
      this.nodeList[index].isLock = true
      this.$confirm('确定删除该该节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning'
      })
        .then(() => {
          this.nodeDelete(item, index)
        })
        .catch(() => {
          this.nodeList[index].isLock = false
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    nodeDelete(item, index) {
      var parentId = 0,
        sonId = 0
      if (this.nodeList.length > 1) {
        if (index == 0) {
          sonId = this.nodeList[index + 1].id
        } else if (index == this.nodeList.length - 1) {
          parentId = this.nodeList[index - 1].id
        } else {
          parentId = this.nodeList[index - 1].id
          sonId = this.nodeList[index + 1].id
        }
      }
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId,
          projectNodeId: item.id,
          parentId: parentId,
          sonId: sonId
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/deleteProjectNode'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.initWeight = this.residueWeight = this.$tools.accAdd(this.residueWeight, item.weight)
                  this.nodeList.splice(index, 1)
                  this.nodeList[index].isLock = false
                  // this.closeCallback()
                  // this.getNodeList()
                }
              })
            } else {
              this.nodeList[index].isLock = false
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {
                  this.loading.setNodeloading = false
                }
              })
            }
          })
        })
        .catch((error) => { })
    },
    openEdit(item) {
      // console.log(item)
      this.setNodeTitle = '编辑节点'
      this.setNodeIsShow = true
      this.setNodeRuleForm.projectNodeId = item.id
      this.setNodeRuleForm.nodeName = item.nodeName
      if (item.startTime) {
        this.setNodeRuleForm.dateArr.push(item.startTime ? new Date(item.startTime) : new Date())
        this.setNodeRuleForm.dateArr.push(item.endTime ? new Date(item.endTime) : new Date().getTime() + 3600 * 1000 * 24 * (item.planDays - 1))
        this.setNodeRuleForm.planDays = item.planDays
      }
      this.setNodeRuleForm.masterUid = item.masterUid
      this.setNodeRuleForm.weight = item.weight + ''
      this.residueWeight = this.initWeight
      this.residueWeight = this.$tools.accAdd(this.residueWeight, item.weight)

      //编辑节点前重置项目列表选人组件 清除表单验证
      this.optNode.selectedUserList = item.master //已选的
      // setTimeout(() => {
      //   this.$refs.nodeSelectUser.resetSelectUser()
      // }, 100)

      this.optNode.selectedUserList = item.master
      setTimeout(() => {
        // this.$refs.nodeSelectUser.resetSelectUser()
        this.$nextTick(() => {
          this.$refs.setNodeRuleForm.clearValidate()
        })
      }, 100)
      this.setNodeRuleForm.masterUid = item.master
        .map((item) => {
          return item.userId
        })
        .join()
    },
    editNode() {
      console.log(this.setNodeRuleForm.masterUid, 999)
      var data = [
        {
          userId: this.uid,
          nodeName: this.setNodeRuleForm.nodeName,
          rootProjectId: this.query.rootProjectId,
          projectNodeId: this.setNodeRuleForm.projectNodeId,
          planDays: this.setNodeRuleForm.planDays,
          startTime: this.$tools.getDateFormatString('ymdhms', this.setNodeRuleForm.dateArr[0]).substring(0, 10) + ' 00:00:00',
          endTime: this.$tools.getDateFormatString('ymdhms', this.setNodeRuleForm.dateArr[1]).substring(0, 10) + ' 23:59:59',
          masterUid: this.setNodeRuleForm.masterUid,
          weight: this.setNodeRuleForm.weight
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/editProjectNode'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                onClose: () => {
                  this.getNodeList()
                  this.setNodeIsShow = false
                  this.loading.setNodeloading = false
                  this.closeCallback()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {
                  this.loading.setNodeloading = false
                }
              })
            }
          })
        })
        .catch((error) => { })
    },
    getTreeData(data) {
      var items = [],
        deepEach = function (data) {
          var item = {}
          for (var key in data) {
            if (key !== 'children') {
              item[key] = data[key]
            } else {
              if (data['children'].length) {
                deepEach(data['children'][0])
              }
            }
          }
          items.push(item)
        }
      if (data) {
        deepEach(data)
      }
      return items.reverse()
    },
    getNodeList() {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/projectNodeList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.pmStartTime = data.data.startTime
              this.pmEndTime = data.data.endTime
              this.pmPlanDays = data.data.planDays
              if (data.data.firstNode != null) {
                this.nodeList = this.getTreeData(data.data.firstNode)
                if (this.query.nodeId) {
                  this.getTaskList(this.query.nodeId)

                  this.nodeList.some((item) => {
                    if (item.id == this.query.nodeId) {
                      this.isAddTaskPower = item.addTaskPower
                      return
                    }
                  })
                } else {
                  this.getTaskList(this.getTreeData(data.data.firstNode)[0].id)
                  this.isAddTaskPower = this.getTreeData(data.data.firstNode)[0].addTaskPower
                }
                this.templateId = data.data.templateId
                this.totalWeight = 0
                this.nodeList.forEach((item) => {
                  item.isShowPopover = false
                  item.isLock = false
                  this.totalWeight = this.$tools.accAdd(this.totalWeight, item.weight)
                })
                this.initWeight = this.residueWeight = this.$tools.Subtr(100, this.totalWeight)
              } else {
                this.initWeight = this.residueWeight = 100
              }
              // console.log(this.nodeList, 789)
            } else {
              this.nodeList = []
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    },
    getTaskList(nodeId) {
      this.nodeId = nodeId
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId,
          nodeId: nodeId,
          page: this.page,
          pageSize: this.pageSize
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/taskStat'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.taskDetailList = data.data
            } else {
              this.taskDetailList = { list: [] }
            }
          })
        })
        .catch((error) => { })
    },
    getProjectUserList() {
      var data = [{ userId: this.uid, rootProjectId: this.query.rootProjectId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectUserList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.optNode.projectUserList = data.data
            } else {
              this.optNode.projectUserList = []
            }
          })
        })
        .catch((error) => { })
    },
    getTemplateList() {
      var data = [
        {
          userId: this.uid,
          page: 1,
          pagesize: 99999
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/templateList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.templateList = data.data.items
            } else {
              this.templateList = []
            }
          })
        })
        .catch((error) => { })
    },
    addTemplate(templateName) {
      var data = [
        {
          userId: this.uid,
          templateName: templateName,
          nodeJson: JSON.stringify(this.nodeList),
          rootProjectId: this.query.rootProjectId,
          remark: ''
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/addTemplate'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                onClose: () => {
                  // this.getTemplateList()
                  // this.jumpLink()
                  // this.$message({
                  //   message: '操作成功，跳转至节点详情',
                  //   type: 'success'
                  // })
                  this.$router.push('/main/#/pm?tab=detail&elTab=2&rootProjectId=' + this.query.rootProjectId)
                  this.closeTab('pm-create')
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {
                  this.loading.setNodeloading = false
                }
              })
            }
          })
        })
        .catch((error) => { })
    },
    submitFormTemplate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.templateVisible = false
          this.addTemplate(this.templateRuleForm.templateName)
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetFormTemplate(formName) {
      this.$refs[formName].resetFields()

      this.templateVisible = false
      this.$message({
        message: '操作成功，跳转至节点详情',
        type: 'success'
      })
      this.$router.push('/main/#/pm?tab=detail&elTab=2&rootProjectId=' + this.query.rootProjectId)
      this.closeTab('pm-create')
    },
    addTemplateBox() {
      this.templateVisible = true
    },
    addProjectBox() {
      if (!this.nodeList.length) {
        this.$alert('请添加项目节点!', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: (action) => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${action}`
            // })
          }
        })
        return
      }
      // 不存在新增
      if (!this.templateId) {
        this.completeProject()
      } else {
        this.editTemplateBox()
      }
    },
    completeProject() {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/completeProjectCreation'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.updateTemplate || !this.templateId) {
                this.addTemplateBox()
              } else {
                this.$message({
                  message: '操作成功，跳转至节点详情',
                  type: 'success'
                })
                this.$router.push('/main/#/pm?tab=detail&elTab=2&rootProjectId=' + this.query.rootProjectId)
                this.closeTab('pm-create')
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {
                  this.loading.setNodeloading = false
                }
              })
            }
          })
        })
        .catch((error) => { })
    },
    editTemplateBox() {
      this.completeProject()
      // this.$confirm('创建项目吗？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   cancelButtonClass: 'dt-button-cancle is-plain',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     this.completeProject()
      //   })
      //   .catch(() => {
      //     console.log('取消')
      //   })
    },
    //点击表格每一行 编辑
    editTaskCard(row, column, event) {
      if (row.taskType == 1) {
        //内部
        if (row.createUid == this.uid) {
          this.$root.$emit('openTaskCard', { mode: 'edit', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        } else {
          this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        }
      } else {
        //企业
        // let detailUrl = '/orderNormalJF?id=' + row.demandId + '&demandTitle=' + row.taskName + '&bidType=' + row.taskType

        let dataUrl = ''
        if (row.demandState == 20) {
          dataUrl = 'https://www.ccccdt.com/publish/write?demandId=' + row.demandId
        } else {
          dataUrl = 'https://www.ccccdt.com/orderDetail?id=' + row.demandId
        }
        window.open(dataUrl)
      }
    },
    // 当前用户是否可以发单
    getIsEmployer(type, queryData) {
      // type类型1企业、2创客
      var data = [{ user_id: this.uid }],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/get_user_info_2019'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.is_employer) {
                if (type == 1) {
                  localStorage.removeItem('orderRuleFormOut')
                  this.$router.push('/main/#/pm?tab=add-out&' + this.$qs.stringify(queryData))
                } else {
                  localStorage.removeItem('orderRuleFormCk')
                  this.$router.push('/main/#/pm?tab=add-ck&' + this.$qs.stringify(queryData))
                }
              } else {
                this.$confirm('您尚未完成雇主认证，无法创建企业和创客订单', '提示', {
                  confirmButtonText: '立即认证',
                  cancelButtonText: '取消',
                  cancelButtonClass: 'dt-button-cancle is-plain',
                  type: 'warning'
                })
                  .then(() => {
                    window.open('/myAccountRoleEmployer')
                  })
                  .catch(() => { })
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    }
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        if (this.query.nodeId) {
          this.getTaskList(this.query.nodeId)
        } else {
          this.getTaskList(this.nodeId)
        }
      }
    }
  },
  mounted() {
    if (this.query.rootProjectId) {
      this.getNodeList()
      this.getProjectUserList()
    }
    this.getTemplateList()
  }
}
</script>
<style scoped>
.dt-content-page {
  background: #f2f3f5;
}

.dt-node-box {
  background: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: auto;
}

.dt-toolbar {
  padding: 0px 14px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;

  justify-content: space-between;
  align-items: center;

  height: 70px;
  border-bottom: 1px solid #dcdfe6;
}

.dt-toolbar>>>.el-input__inner {
  height: 36px;
  line-height: 36px;
}

.el-form-item {
  margin-bottom: 0px;
}

.dt-node-list {
  padding: 14px 14px 14px 0px;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  overflow-x: auto;
}

.dt-node-add,
.dt-node-card {
  display: -webkit-flex;
  display: flex;
  width: 200px;
  height: 92px;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;

  justify-content: center;
  cursor: pointer;
}

.dt-node-add {
  margin-left: 30px;
}

.dt-node-add .el-button--text {
  color: #c0c4cc;
}

.dt-node-add:hover {
  border: 1px dashed #d6e4ff;
  background: #f0f5ff;
}

.dt-node-add:hover .el-button--text {
  color: #2f54eb;
}

.dt-node-item {
  /* margin-bottom: 14px; */
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;

  width: 262px;
  justify-content: center;
  align-items: center;
}

.dt-node-card {
  margin: 0 30px;
  width: 176px;
  height: 63px;
  padding: 16px 12px 12px;
  border: 1px solid #d6e4ff;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.dt-node-card .dt-user-name {
  margin-right: 8px;
}

/* .dt-node-card:hover, */
.dt-node-card.dt-cur {
  background-color: #85a5ff;
}

/* .dt-node-card:hover h4,
.dt-node-card:hover p,
.dt-node-card:hover .dt-node-progress, */
.dt-node-card.dt-cur h4,
.dt-node-card.dt-cur p,
.dt-node-card.dt-cur p.dt-null,
.dt-node-card.dt-cur .dt-node-progress {
  color: #fff;
}

.dt-node-card h4 {
  color: #1f1f1f;
  font-weight: normal;
}

.dt-node-card p,
.dt-node-card p.dt-null,
.dt-node-progress,
.dt-node-time {
  color: #606266;
  font-size: 12px;
}

.dt-node-card p {
  margin: 13px 0px 10px;
  color: #606266;
}

.dt-node-card p span {
  margin-right: 8px;
}

.dt-node-card p.dt-null {
  color: #909399;
}

.dt-node-card>>>.el-popover {
  min-width: 125px;
}

.dt-node-progress {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.dt-nodeclose {
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  background: #f2f3f5;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.dt-circle-plus {
  top: 36px;
  right: 21px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background: url(/skb/img/add_node.png) no-repeat center;
  cursor: pointer;
}

.dt-circle-plus:hover {
  background: url(/skb/img/add_node_hover.png) no-repeat center;
}

.dt-add-node {
  border-radius: 5px;
}

.dt-add-node li {
  padding: 0px 20px;
  line-height: 32px;
  cursor: pointer;
}

.dt-add-node li:hover {
  background-color: #f0f5ff;
}

.dt-node-time {
  margin-top: 8px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.dt-node-time>>>.el-button {
  margin-left: 10px;
  padding: 0px;
  font-size: 12px;
}

.dt-node-time.dt-no-data>>>.el-button {
  margin-left: 0;
}

.dt-dashed-line {
  width: 31px;
  height: 1px;
  border-top: 1px dashed #e1e6f0;
}

.dt-dashed-line.left {
  left: -31px;
}

.dt-dashed-line.right {
  right: -31px;
}

.dt-title-box {
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
}

/* .dt-title-box.addTask {
  padding: 16px 0px 12px;
} */
.dt-title-box .dt-statistics {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dt-statistics h3 {
  font-size: 16px;
  margin: 24px 40px 14px 0px;
}

.dt-statistics-task,
.dt-statistics-output {
  margin-top: 10px;
}

.dt-addTask-btn {
  margin-top: 16px;
  height: 28px;
}

.dt-statistics-task span,
.dt-statistics-output span {
  font-size: 12px;
  vertical-align: middle;
  color: #606266;
}

.dt-statistics-task span {
  margin-right: 20px;
}

.dt-statistics-output {
  border-left: 1px solid #c0c4cc;
}

.dt-statistics-output span {
  margin-left: 20px;
}

.dt-set-node>>>.el-dialog__header {
  padding-bottom: 0px;
}

.dt-set-node>>>.el-dialog__body {
  padding: 20px 20px 0px;
}

.dt-set-node>>>.el-input__inner,
.dt-template-box>>>.el-input__inner {
  height: 36px;
  line-height: 36px;
}

.dt-set-node>>>.el-form-item__label,
.dt-set-node>>>.el-form-item__content {
  line-height: 36px;
}

.dialog-footer .el-button--default {
  color: #1f1f1f;
}

.dialog-footer .el-button {
  padding: 10px 19px;
}

.el-button+.el-button {
  margin-left: 6px;
}

.dt-set-node>>>.el-input-group__append {
  padding: 0px;
  width: 40px;
  text-align: center;
}

.dt-set-node>>>.el-form-item {
  margin-bottom: 20px;
}

.dt-set-node>>>.el-dialog__footer {
  border-top: 1px solid #ecf0f8;
  padding: 15px 20px;
}

.dt-set-node>>>.el-dialog__footer {
  border-top: 1px solid #ecf0f8;
  padding: 15px 20px;
}

.dt-residue-weight {
  margin-left: 6px;
}

.custom-table {
  padding: 14px;
  background-color: #fff;

  flex: 1;
}

.custom-table.empty {
  display: flex;
  justify-content: center;
}

.custom-table>>>.el-table .el-table__cell {
  padding: 4px 0px;
  font-size: 12px;
}

.custom-table>>>.el-table__body-wrapper {
  color: #1f1f1f;
}

.custom-table>>>.el-table__header th {
  background-color: #fafafa;
}

/* 提示弹窗 */
body .el-message-box__status+.el-message-box__message {
  padding-left: 36px !important;
}

.custom-table>>>.postpone-row {
  background: #fff0f0;
}

.custom-table>>>.advance-row {
  background: #f6ffed;
}

.custom-table>>>.el-table tr {
  cursor: pointer;
}

.dt-content-project-list-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-template-box>>>.el-dialog__body {
  padding: 0px 20px;
}

.dt-template-box>>>.el-form-item__content {
  line-height: 26px;
}

.dt-template-box .el-input {
  margin-top: 6px;
}

.dt-template-box>>>.el-dialog__footer {
  margin-top: 10px;
}

.dt-my-template {
  padding: 10px 17.5px;
}
</style>
